<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script>
        // TODO：Proxy完成vue的响应式
        let obj = new Proxy({}, {
                get(obj, prop) {
                    // 每次访问obj的属性的时候就会执行get，返回这个对象的属性值
                    return obj[prop]
                },
                set(obj, prop, value) {
                    // 每次修改obj的属性的时候就会执行set，在这里设置属性值
                    console.log({
                        obj,
                        prop,
                        value
                    })
                    obj[prop] = value
                    setAppContent()
                }
            })
            // 这个方法专门负责渲染DOM
        const setAppContent = () => {
            document.querySelector('#app').innerHTML = obj.x
        }
    </script>
</body>

</html>